import { animate, group, query, style, transition, trigger } from '@angular/animations';

export const routerAnimation = trigger('routerAnimation', [
    transition('* => *', [
        query(':enter, :leave', style({ position: 'fixed', width: '100%' }), { optional: true }),
        group([
            query(
                ':enter',
                [
                    style({ transform: 'translateY(30px)', opacity: 0 }),
                    animate('0.8s cubic-bezier(.165, .84, .44, 1)', style({ transform: 'translateY(0)', opacity: 1 }))
                ],
                {
                    optional: true
                }
            ),
            query(
                ':leave',
                [style({ transform: 'translateY(0)' }), animate('0.3s cubic-bezier(.165, .84, .44, 1)', style({ transform: 'translateY(20px)', opacity: 0 }))],
                {
                    optional: true
                }
            )
        ])
    ])
]);
